<html>
 <head>
  <style>
body {
 background: #fff;
 scroll: none;
}
#hdrtable {
 position: absolute;
 top: 5px;
 width: 98%;
 left: 1%;
 border: 1px solid #999;
 border-collapse: collapse; 
 z-index: 4;
}
#hdrtable td {
 font-family: Verdana, Helvetica, sans-serif;
 font-size: 9px;
 font-weight: bold;
 padding: 5px;
 background-color: #069;
 border: 1px solid #999;
 color: #fff;
}
.authorcell {
 width: 165px;
 min-width: 165px;
 max-width: 165px;
 vertical-align: top;
}
.bodycell {
 vertical-align: top;
}

#posttable {
 position: absolute;
 bottom: 5px;
 width: 98%;
 left: 1%;
 border: 1px solid #999;
 border-collapse: collapse; 
 z-index: 2;
}
#posttable td {
 background: #ddd;
 border: 1px solid #999;
 padding: 5px;
}

#blocker {
 position: absolute;
 top: 0px;
 left: 0px;
 height: 10px;
 width: 100%;
 background-color: #fff;
 z-index: 3;
}

.fillercell td {
 height: 1600px;
}
  </style>
  <script>
var animTimer = null;
var animEl = null;
var maxHeight = 0;
var targetHeight = 0;
var targetMs = 0;

function addPost() {
   var newtb = document.createElement("tbody");
   var newtr = document.createElement("tr");
   var newac = document.createElement("td");
   var newbc = document.createElement("td");
   newtr.appendChild(newac);
   newtr.appendChild(newbc);
   newac.className = "authorcell";
   newac.className = "bodycell";
   newac.innerHTML = "biznatchio";
   newbc.innerHTML =
      "yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/>" +
      "yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/>";
   //document.getElementById("posttable-body").appendChild(newtr);
   newtb.appendChild(newtr);
   document.getElementById("posttable").appendChild(newtb);
/*
   newtr.style.overflow = "hidden";
   newtr.style.height = "10px";
   newtr.style.maxHeight = "10px";
   newac.style.overflow = "hidden";
   newac.style.height = "10px";
   newac.style.maxHeight = "10px";
   newbc.style.overflow = "hidden";
   newbc.style.height = "10px";
   newbc.style.maxHeight = "10px";
*/
   targetHeight = newtb.offsetHeight;
   targetMs = (new Date()).getTime() + 1000;
   newtb.style.maxHeight = "1px";
   newtb.style.overflow = "hidden";
   if (animEl) {
      stopAnimation();
   }
   animEl = newtb;
   animTimer = setTimeout(animStep, 1);
}

function animStep() {
   animTimer = null;
   var nowMs = (new Date()).getTime();
   var targetStr = ( ((1000-(targetMs-nowMs))/1000)*targetHeight ) +"px";
   if ( nowMs >= targetMs ) {
      stopAnimation();
   } else {
      //animEl.style.overflow = "visible";
      //animEl.style.maxHeight = "auto";
      //targetHeight = animEl.offsetHeight;
      //animEl.style.overflow = "hidden";
      animEl.style.maxHeight = targetStr;
      animTimer = setTimeout(animStep, 1);
   }
}

function stopAnimation() {
   animEl.style.overflow = "visible";
   animEl.style.maxHeight = "auto";
   animEl = null;
   if (animTimer) {
      clearTimeout(animTimer);
   }
}
  </script>
 </head>
 <body onclick="addPost();">
  <table id="hdrtable" cellspacing="0">
   <tr>
    <td class="authorcell">Author</td>
    <td class="bodycell">Thread</td>
   </tr>
  </table>

  <div id="blocker">
  </div>

  <table id="posttable" cellspacing="0">
   <tbody id="posttable-body">
    <tr class="fillercell">
     <td class="authorcell"></td>
     <td class="bodycell"></td>
    </tr>
    <tr>
     <td class="authorcell">biznatchio</td>
     <td class="bodycell">
      yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/>
      yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/>
      yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/>
     </td>
    </tr>
    <tr>
     <td class="authorcell">biznatchio</td>
     <td class="bodycell">
      yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/>
      yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/> yeah yeah sample text dog<br/>
     </td>
    </tr>
   </tbody>
  </table>
 </body>
</html>
